<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="utf-8">
    <title>第一个vue应用</title>
    <script src="../js/vue.min.2.7.0.js"></script>
    <script src="../js/vue-router.min.js"></script>
</head>
<body>
<!--
<router-link> 相关属性
    接下来我们可以了解下更多关于 <router-link> 的属性。

        to
        表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

        &lt;!&ndash; 字符串 &ndash;&gt;
        <router-link to="home">Home</router-link>
        &lt;!&ndash; 渲染结果 &ndash;&gt;
        <a href="home">Home</a>

        &lt;!&ndash; 使用 v-bind 的 JS 表达式 &ndash;&gt;
        <router-link v-bind:to="'home'">Home</router-link>

        &lt;!&ndash; 不写 v-bind 也可以，就像绑定别的属性一样 &ndash;&gt;
        <router-link :to="'home'">Home</router-link>

        &lt;!&ndash; 同上 &ndash;&gt;
        <router-link :to="{ path: 'home' }">Home</router-link>

        &lt;!&ndash; 命名的路由 &ndash;&gt;
        <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

        &lt;!&ndash; 带查询参数，下面的结果为 /register?plan=private &ndash;&gt;
        <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
        replace
        设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

        <router-link :to="{ path: '/abc'}" replace></router-link>
        append
        设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

        <router-link :to="{ path: 'relative/path'}" append></router-link>
        tag
        有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

            <router-link to="/foo" tag="li">foo</router-link>
            &lt;!&ndash; 渲染结果 &ndash;&gt;
            <li>foo</li>
            active-class
            设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。

            <style>
                ._active{
                    background-color : red;
                }
            </style>
            <p>
                <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
                <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
            </p>
            注意这里 class 使用 active-class="_active"。

            exact-active-class
            配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

            <p>
                <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
                <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
            </p>
            event
            声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

            <router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
            以上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。
            -->
<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo" tag="li">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    // 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)

    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Foo = {template: '<div>this is foo page!</div>'}
    const Bar = {template: '<div>this is bar page!</div>'}

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar}
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app')

    // 现在，应用已经启动了！
</script>
</body>
</html>